<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      #ggk {
         width: 600px;
         height: 300px;
         font-size: 30px;
         font-weight: 900;
         text-align: center;
         line-height: 300px;
         overflow: hidden;
         position: absolute;
         left: 0;
         top: 0;
      }

      canvas {
         position: absolute;
         left: 0;
         top: 0;
      }
   </style>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <div id="ggk">谢谢惠顾</div>
   <canvas id="c1" width="600" height="300">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')
      // 3.绘制图形
      // 3.1绘制矩形fillRect(位置x，位置y，宽度，高度)
      /*
         ctx.fillStyle = "rgba(0,0,255,1)"
         ctx.fillRect(300, 300, 100, 100)
         // 改变默认合成方式
         ctx.globalCompositeOperation = "source-in"
         ctx.fillStyle = "rgba(255,0,0,1)"
         ctx.fillRect(250, 250, 100, 100)
      */

      // 合成图像实现刮刮卡
      let img = new Image()
      img.src = "../imgs/money.jpg"
      img.onload = function () {
         ctx.drawImage(img, 0, 0, 600, 300)
      }
      let isDraw = false
      c1.onmousedown = function () {
         isDraw = true
      }
      c1.onmouseup = function () {
         isDraw = false
      }
      c1.onmousemove = function (e) {
         if (isDraw) {
            let x = e.pageX
            let y = e.pageY
            ctx.globalCompositeOperation = "destination-out"
            ctx.arc(x, y, 20, 0, 2 * Math.PI)
            ctx.fill()
         }
      }
      let random = Math.random()
      if (random < 0.1) {
         const ggkDiv = document.querySelector('#ggk')
         ggkDiv.innerHTML = "恭喜你获得iphone14 pro一台!"
      }
   </script>
</body>

</html>